<template>
    <div class="xqiu">
        <svg version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
             x="0px"
             y="0px"
             style="display: none;">
            <symbol id="wave">
                <path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
                <path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
                <path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
                <path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
            </symbol>
        </svg>
        <div class="box" :style="{'background': bg,'transition':'linear 1s'}">
            <div class="percent">
                <div class="percentNum"
                     id="count">{{percent}}</div>
                <div class="percentB">分</div>
            </div>
            <div id="water"
                 class="water" :style="{'background': qg2,'transform':'translate(0,0' + (100 - this.percent) + '%)','transition':'linear 1s'}">
                <svg viewBox="0 0 560 20"
                     class="water_wave water_wave_back" :style="{'fill': qg1,'transition':'linear 1s'}">
                    <use xlink:href="#wave"></use>
                </svg>
                <svg viewBox="0 0 560 20"
                     class="water_wave water_wave_front"  :style="{'fill': qg2,'transition':'linear 1s'}">
                    <use xlink:href="#wave"></use>
                </svg>
            </div>
            <div id="watercover"></div>
        </div>
    </div>
</template>
<script>
//       灰          深红        浅绿        浅黄        浅橙      浅红
//   const c = ['#f0f0f0', '#B22222', '#98FB98', '#FFFFE0', '#FFDEAD', '#FFA07A']
//      草绿        黄          橘黄       红
//   const c2 = ['#7CFC00', '#FFFF00', '#FFD700', '#FF4500']
const COLORS = [
  "#f0f0f0", // 灰     0
  "#B22222", // 深红  1
  "#98FB98", // 浅绿  2
  "#FFFFE0", // 浅黄  3
  "#FFDEAD", // 浅橙  4
  "#FFA07A", // 浅红   5
  "#228B22", // 草绿  6
  //    '#FFFF00', // 黄    7
  "#FF8207",
  "#FFD700", // 橘黄  8
  "#F70004"
  //    '#FF4500'// 红      9
];
export default {
  name: "xqiu",
  props: ["num"],
  data() {
    return {
    	percent : 0,
      bg: COLORS[0],
      qg1: COLORS[2],
      qg2: COLORS[6],
      interVal: new Function()
    };
  },
  created() {
    
  },
  methods: {
  	init(num){
  		this.initColor(num)
	    this.startInterVal(num)
  	},
  	initColor(num){
  		if (num == 0) {
  			this.qg1 = COLORS[5];
	      this.qg2 = COLORS[9];
	      this.bg = COLORS[1];
	    } else if (num >= 90) {
	    	this.qg1 = COLORS[2];
	    	this.qg2 = COLORS[6];
	    	this.bg = COLORS[0]
	    } else if (num >= 80) {
	      this.qg1 = COLORS[3];
	      this.qg2 = COLORS[7];
	      this.bg = COLORS[0]
	    } else if (num >= 70) {
	      this.qg1 = COLORS[4];
	      this.qg2 = COLORS[8];
	      this.bg = COLORS[0]
	    } else if (num < 70) {
	      this.qg1 = COLORS[5];
	      this.qg2 = COLORS[9];
	      this.bg = COLORS[0]
	    }
  	},
    startInterVal(num) {
    	if(this.interval){
    		clearInterval(this.interval);
    	}
    	this.percent = 0;
      if (num||num==0) {
        this.interval = setInterval(() => {
          if (this.percent == num) {
            clearInterval(this.interval);
          }else{
          	this.percent++;
          }
          this.initColor(this.percent)
        }, 60);
      }
    }
  },
  mounted() {
  	let num = this.num || 0;
    this.init(num);
  },

};
</script>

<style scoped="">
	#water svg {
		position: relative;
		z-index: 2;
		left: -100%;
		top: -20px;
	}
	#water svg.water_wave_front {
		z-index: 5;
    top: -51px;
    left: 0;
	}
	#watercover {
		display: block;
		position: absolute;
		z-index: 50;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: -webkit-radial-gradient(39% 30%, circle cover, rgba(255, 255, 255,.85), rgba(255, 255, 255, 0.59) 16%, rgba(0, 0, 0, 0.05) 64%);
	}
</style>
